<template>
	<view class="bodyy">
		<view style="height: 20rpx;"></view>
		<view class="card">
		  <view class="card-header">
		    <view class="icon-container"><u-icon name="calendar" size="45rpx" color="#000000"></u-icon></view>
		    <view class="title">{{item.name}}</view>
		    <view class="time">预约时间{{item.createTime}}</view>
		  </view>
		  <view class="card-content">
		    <view class="image-container">
		      <image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.images"></image>
		    </view>
		    <view class="details">
		      <view class="details-row">
		        
		        <view class="label">上课时间：{{item.reservationTime}}</view>
		      </view>
		      <view class="details-row">
		        
		        <view class="label">学员姓名：{{item.memberUserRealName}}</view>
		      </view>
		      <view class="details-row">
		        
		        <view class="label">学员电话：{{item.memberUserPhone}}</view>
		      </view>
		      <view class="details-row">
		        
		        <view class="label" style="margin-left: 5rpx;">训练时长：{{item.courseTime}}小时</view>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="card2">
			<p>学员训练采集</p>
			<view style="width: 100%;height: 250rpx;margin-top: 50rpx;">
				<view style="float: left;width: 43%;height: 250rpx;border-right: 1px solid #d9d9d9;">
					<u-upload width="250rpx" height="250rpx" :fileList="fileList1" @afterRead="afterRead"
						:capture="['camera','album']" @delete="deletePic" name="1" multiple :maxCount="1">
						</u-upload>
				</view>
				<view style="float: left;width: 45%;height: 200rpx;margin-left: 10%;margin-top:50rpx;">
					<view class="content">
						<picker mode="selector" :range="weightRange" :value="selectedWeightIndex"
							@change="handleWeightChange">
							<view class="picker">
								<view style="font-size: 30rpx;">当前体重</view>

								<view
									style="font-size: 50rpx;letter-spacing: 5rpx;margin-top: 20rpx;margin-bottom: 20rpx;">
									<view style="float: left;">{{ weightRange[selectedWeightIndex]}}kg </view>
									<view style="float: left; margin-top: 10rpx; margin-left: 20rpx;">
									<u-icon name="reload" size="50rpx"></u-icon></view>
								</view>

							</view>
						</picker>
					</view>
				</view>

			</view>
		</view>

		<view class="card3-v2">
			<view style="width: 35%;height: 120rpx;margin: 0 auto;">
				<view class="bottom1" @click="uploadImg()">
					<text>上传实训</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: '',
				ImageFile: '',
				weightRange: [],
				selectedWeightIndex: 40,
				item: {},
				fileList1: [],
				weight: 0,
				articleForm: {}
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.item = JSON.parse(option.item) //打印出上个页面传递的参数。
			this.initWeightRange();
		},
		methods: {
			uploadImg() {
				var ths = this;
				const formData = {
					...this.articleForm
				};
				uni.uploadFile({
					url: 'http://127.0.0.1:17000/UserRecord/uploadImg',
					filePath: this.ImageFile.url,
					name: 'file',
					formData: formData,
					header: {
						'content-type': 'multipart/form-data',
					},
					success: function(res) {
						// ths.img = res.data.data.data
						uni.request({
							url: 'http://127.0.0.1:17000/UserRecord/uploadUserRecord',
							method: 'POST',
							data: {
								recordId: uni.getStorageSync('teacherinfo').id,
								memberUserId: ths.item.studentId,
								userRecordImg: res.data,
								userWeight: ths.weightRange[ths.selectedWeightIndex],
							},
							success: function(res) {
								if (res.data.data.code == 200) {
									wx.switchTab({
										url: '/pages/coach/home/anpai',
										success: function(e) {
											var page = getCurrentPages().pop();
											if (page == undefined || page == null)
												return;
											page.onLoad();
											// 添加消息提示
											uni.showToast({
												title: '操作成功',
												icon: 'success',
												duration: 2000
											});
										}
									});
								} else {
									uni.showToast({
										title: '操作失败',
										icon: 'error',
										duration: 2000
									});
								}

							},
							fail: function(error) {
								// 处理请求失败
								console.error('上传课程失败，请检查网络');
							}
						})
					},
					fail: function(error) {
						// 处理请求失败
						console.error('开启训练失败，请检查网络');
					}
				})
			},
			initWeightRange() {
				for (let i = 30; i <= 150; i++) {
					this.weightRange.push(i);
				}
			},
			handleWeightChange(event) {
				this.selectedWeightIndex = event.mp.detail.value;
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.ImageFile = lists[i]
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return
			},
			openUpload() {
				uni.navigateTo({
					url: '/pages/coach/train/UploadTraining'
				})
			},
		}
	}
</script>

<style>
	.picker {
		width: 100%;
	}

	.card3-v2 {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 2px 10px #dfdfdf;
		border-radius: 40rpx 40rpx 0 0;
	}

	,
	.card3-v1-v2 {
		height: 70rpx;
		border-left: 1px solid black;
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 1px;
		display: flex;
		letter-spacing: 10rpx;
		justify-content: flex-end;
		align-items: center;
	}

	,
	.card3-v1-v1 {
		height: 70rpx;
		border-right: 1px solid black;
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 1px;
		display: flex;
		align-items: center;
		letter-spacing: 10rpx;
	}

	,
	.card3-v1 {
		height: 70rpx;
		width: 90%;
		margin: 0 auto;
	}

	,
	.card {
		width: 90vw;
		height: 320rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #dfdfdf;
		margin-bottom: 18px;
	}

	.card-header {
		height: 50rpx;
	}

	.icon-container {
		float: left;
	}

	.title {
		float: left;
	}

	.time {
		float: right;
		color: #5C5C5C;
		font-size: 25rpx;
		margin-top: 5rpx;
	}

	.card-content {
		width: 85vw;
		background-color: #F7F7F7;
		margin: 0 auto;
		height: 220rpx;
		padding: 5px;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	.image-container {
		width: 160rpx;
		height: 220rpx;
		float: left;
	}

	.imagg {
		/* Add appropriate styles for the image */
	}

	.details {
		font-size: 26rpx;
		float: left;
		color: #5C5C5C;
	}

	.details-row {
		height: 30rpx;
		margin-top: 20rpx;
	}

	.label {
		float: left;
	}

	.imagg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 4px;
		margin-top: 40rpx;
	}

	.card2 {
		width: 90vw;
		height: 400rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #dfdfdf;
		margin-bottom: 18px;
	}

	.card3 {
		width: 90vw;
		height: 100rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #d8d8d8;
		border-radius: 30rpx;
		margin-bottom: 18px;
	}

	.bodyy {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		/* 超出部分隐藏，可根据需求调整 */
	}

	.bodyy::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.bottom1 {
		width: 100%;
		height: 70rpx;
		float: left;
		margin-top: 25rpx;
		background-image: linear-gradient(to bottom right, #94A9FD, #9ECFFF, #b9e1ff);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 20rpx;
	}
</style>